<template>
  <div>
    <nav-bar class="navBar">
      <template #left>
        <span class="iconfont iconleft" @click="goBack"/>
      </template>
      <template #center>
        <div class="itemTitleBox">
          <div v-for="(item, index) in title"
               :key="index" :class="{itemTitle:true, active: currentIndex === index}"
               @click="clickItemTitle(index)">{{item}}</div>
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";

  export default {
    name: "detailNavBar",
    components: {NavBar},
    data(){
      return {
        title: ['商品', '参数', '评论', '推荐'],
        currentIndex: 0
      }
    },
    methods: {
      // 点击title，使字体变红色
      clickItemTitle(index){
        this.currentIndex = index
        this.$emit('itemClick', index)
      },

      // 返回
      goBack(){
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .navBar{
    background-color: var(--color-background);
    color: var(--color-text);
  }
  .itemTitleBox{
    display: flex;
  }
  .itemTitle{
    flex: 1
  }
  .active{
    color: var(--color-high-text)
  }
</style>
